<template>
	<view :data-theme="theme">
		<view class="fixed main_bg">
			<useNavBar :title="$t(`page.users.userCoupon.navTitle`)" :isLeft="false">
				<view
					slot="right"
					style="color: #fff"
					class="iconfont icon-more"
					@click="open"
				></view>
			</useNavBar>
			<view class="acea-row row-around nav">
				<template>
					<view
						v-for="(item, index) in navList"
						:key="index"
						:class="['acea-row', 'row-middle', type === item.type ? 'on' : '']"
					>
						<text @click="setType(item.type)">{{
							$t(`page.users.userCoupon.navList[${index}].name`)
						}}</text>
					</view>
				</template>
			</view>
		</view>
		<view class="coupon-list" v-if="couponsList.length">
			<view
				class="item acea-row row-center-wrapper"
				v-for="(item, index) in couponsList"
				:key="index"
			>
				<view class="money" :class="item.isUse ? 'moneyGray' : 'main_bg'">
					<view
						>$<text class="num">{{
							item.money ? Number(item.money) : ""
						}}</text></view
					>
					<view class="pic-num" v-if="parseFloat(item.minPrice) > 0">
						{{ $t(`page.index.couponDesc`)
						}}<statistic :value="item.minPrice" :currency="item.currency"
					/></view>
				</view>
				<view class="text">
					<view class="condition line2">
						<span>{{ item.name }}</span>
					</view>
					<span
						class="font-mini font_color"
						:class="
							item.validStr === 'unusable' ||
							item.validStr === 'overdue' ||
							item.validStr === 'notStart'
								? 'bg-color-huic'
								: 'bg-color-check'
						"
						v-if="item.useType === 1"
						>{{ $t(`page.users.userCoupon.general`) }}</span
					>
					<span
						class="font-mini font_color"
						:class="
							item.validStr === 'unusable' ||
							item.validStr === 'overdue' ||
							item.validStr === 'notStart'
								? 'bg-color-huic'
								: 'bg-color-check'
						"
						v-else-if="item.useType === 2"
						>{{ $t(`page.users.userCoupon.goods`) }}</span
					>
					<span
						class="font-mini font_color"
						:class="
							item.validStr === 'unusable' ||
							item.validStr === 'overdue' ||
							item.validStr === 'notStart'
								? 'bg-color-huic'
								: 'bg-color-check'
						"
						v-else-if="item.useType === 3"
						>{{ $t(`page.users.userCoupon.cate`) }}</span
					>
					<view class="data acea-row row-between-wrapper">
						<view v-if="item.day > 0"
							>{{ $t(`page.users.userCoupon.valid`) }} {{ item.day }}
							{{ $t(`page.users.userCoupon.day`) }}</view
						>
						<view v-else>{{
							item.useStartTimeStr && item.useEndTimeStr
								? item.useStartTimeStr + " - " + item.useEndTimeStr
								: ""
						}}</view>
						<view class="bnt gray" v-if="item.isUse == true">{{
							$t(`page.users.userCoupon.received`)
						}}</view>
						<view class="bnt main_bg" v-else @click="getCoupon(item.id, index)">
							{{ $t(`page.users.userCoupon.receive`) }}</view
						>
					</view>
				</view>
			</view>
		</view>
		<view class="loadingicon acea-row row-center-wrapper">
			<text
				class="loading iconfont icon-jiazai"
				:hidden="loading == false"
			></text
			>{{ couponsList.length ? loadTitle : "" }}
		</view>
		<view class="noCommodity" v-if="!couponsList.length && isShow && !loading">
			<view class="pictrue text-center">
				<image src="../../../static/images/noCoupon.png"></image>
			</view>
			<text class="text-ccc">{{ $t(`page.users.userCoupon.empty`) }}</text>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</view>
</template>

<script>
import statistic from "@/components/statistic";
import { getCoupons, setCouponReceive } from "@/api/api.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
export default {
	components: { statistic },
	data() {
		return {
			couponsList: [],
			loading: false,
			loadend: false,
			loadTitle: this.$t("page.goodsList.more"), //提示语
			page: 1,
			limit: 20,
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			type: 1,
			isShow: false,
			navList: [
				{
					type: 1,
					name: "商家券",
					count: 0,
				},
				{
					type: 2,
					name: "商品券",
					count: 0,
				},
			],
			count: 0,
			theme: "theme3",
			rightDrawer: false,
		};
	},
	computed: mapState(useAppStore, ["isLogin"]),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getUseCoupons();
				}
			},
			deep: true,
		},
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.userCoupon.navTitle`),
		});
		if (this.isLogin) {
			this.getUseCoupons();
		} else {
			toLogin();
		}
	},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		this.getUseCoupons();
	},
	methods: {
		getCoupon: function (id, index) {
			let that = this;
			let list = that.couponsList;
			let ids = [];
			ids.push(id);
			//领取优惠券
			setCouponReceive(id).then(
				function (res) {
					list[index].isUse = true;
					that.$set(that, "couponsList", list);
					that.$util.Tips({ title: "领取成功" });
				},
				function (res) {
					return that.$util.Tips({ title: res });
				}
			);
		},
		/**
		 * 获取领取优惠券列表
		 */
		getUseCoupons: function () {
			let that = this;
			if (that.loadend) return false;
			if (that.loading) return false;
			that.loading = true;
			getCoupons({ page: that.page, limit: that.limit, type: that.type })
				.then((res) => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let couponsList = that.$util.SplitArray(list, that.couponsList);
					that.$set(that, "couponsList", couponsList);
					that.loadend = loadend;
					that.loadTitle = loadend
						? this.$t("page.goodsList.no")
						: this.$t("page.goodsList.more");
					that.page = that.page + 1;
					that.loading = false;
					that.isShow = true;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = this.$t("page.goodsList.more");
				});
		},
		setType: function (type) {
			if (this.type !== type) {
				this.type = type;
				this.couponsList = [];
				this.page = 1;
				this.loadend = false;
				this.getUseCoupons();
			}
		},
		returns: function () {
			uni.navigateBack();
		},
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
	},
};
</script>

<style scoped lang="scss">
.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 9;
}

.nav {
	width: 100%;
	height: 106rpx;
	color: #999999;
}

.nav .acea-row {
	border-top: 5rpx solid transparent;
	border-bottom: 5rpx solid transparent;
	cursor: pointer;
}

.nav .acea-row.on {
	@include tab_border_bottom(theme);
	@include main_color(theme);
}

.condition .line-title {
	width: 90rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	background: #fff;
	opacity: 1;
	border-radius: 20rpx;
	font-size: 20rpx;
	margin-right: 12rpx;
}

.condition .line-title.gray {
	border: 1px solid #bbb;
	color: #bbb;
	background-color: #f5f5f5;
}

.coupon-list {
	padding: 0 30rpx;
	margin-top: 210rpx;
}

.coupon-list .pic-num {
	color: #ffffff;
	font-size: 24rpx;
}

.noCommodity {
	margin-top: 210rpx;
	.pictrue {
		width: 280rpx;
		height: 260rpx;
	}
}

.main_bg {
	@include main_bg_color(theme);
}

.select {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
</style>
